var board = new Array();
var score = 0;
var isCollide = new Array();
var isGameOver = false;

//适应移动端
var startX=0;
var startY=0;
var endX=0;
var endY=0;

var documentWidth=window.screen.availWidth;//当前设备的宽度
var containerWidth=0.92*documentWidth;//棋盘格的总宽度
var cellSideLength=0.18*documentWidth;//小格子的宽度
var cellSpace=0.04*documentWidth;//每个小格子的间距



//程序执行入口
// window.onload = function () {

// }
$(function () {
    
    //判断屏幕尺寸
    if(documentWidth>550){
        containerWidth=500;
        cellSideLength=100;
        cellSpace=20;

        
    }
    else{
        containerCss();
    }

    //开始新游戏
    newgrame();
    


});



//重新开始新游戏
function newgrame() {

    init();
    isGameOver = false;


    //开始新的游戏时判断是否存在数字格子，存在删掉
    var node = document.getElementById('container');

    if (document.getElementsByClassName('grid-number')) {
        var removenumnode = document.querySelectorAll('.grid-number');

        for (let i = 0; i < removenumnode.length; i++) {

            node.removeChild(removenumnode[i]);

        }

    }
    

    if (document.getElementById('gameover')) {
        node.removeChild(document.getElementById('gameover'));
    }

    //分数清零
    clearScore();


    //随机产生带数字的格子
    showNum();

    showNum();


    // //获取用户按下的键
    keyValues(board);


    


}

function clearScore(){
    score=0;
    document.getElementById('score').innerText=0;
}


//初始化棋盘格
function init() {
    for (let i = 0; i < 4; i++) {

        board[i] = [];
        isCollide[i] = [];

        for (let j = 0; j < 4; j++) {
            var gridcell = `grid-cell-${i}-${j}`;
            var left = cellSpace + j * (cellSideLength+cellSpace);
            var top = cellSpace + i * (cellSideLength+cellSpace);

            var node = document.getElementById(gridcell);
            node.style.left = left + "px";
            node.style.top = top + "px";

            board[i][j] = 0;
            isCollide[i][j] = false;

        }
    }

    score = 0;
    // for (let i = 0; i < 4; i++) {
    //     board[i] = [];
    //     isCollide[i]=[];

    //     for (let j = 0; j < 4; j++) {
    //         board[i][j] = 0;
    //         isCollide[i][j]=false;
    //     }
    // }


}

//生成数字
function showNum() {
    // console.log(board);
    var [x, y, yesorno] = existsnum();//随机产生一个空位置
    // console.log(x + ',' + y + ',' + yesorno)
    if (yesorno) {
        var value = Math.random();
        var num = value < 0.6 ? 2 : 4;

        board[x][y] = num;


        getnumbergrid(x, y);//生成格子

    }

}

//生成格子
function getnumbergrid(x, y) {
    var node = document.getElementById('container');



    var nodeNum = document.createElement('div');

    nodeNum.className = "grid-number";
    nodeNum.id = `grid-number-${x}-${y}`;
    node.appendChild(nodeNum);
    // node.innerHTML = `<div class="grid-number" id="grid-number-${i}-${j}"></div>`;

    var gridnumnode = document.getElementById(`grid-number-${x}-${y}`);

    var left = cellSpace + (cellSideLength-cellSpace)/2 + y * (cellSideLength+cellSpace);
    var top = cellSpace + (cellSideLength-cellSpace)/2 + x * (cellSideLength+cellSpace);


    gridnumnode.style.left = left + "px";
    gridnumnode.style.top = top + "px";
    gridnumnode.style.borderRadius=cellSpace/2+"px";
    gridnumnode.innerText = board[x][y];


    // console.log(board);
    gridnumnode.style.backgroundColor = gridbackgroundcolor(board[x][y]);
    gridnumnode.style.color=gridNumColor(board[x][y]);


    // gridCartonn(gridnumnode);//产生格子的动画效果
    // showNumGridAnimate(gridnumnode);
    createGridNumAnimate(x,y)



}

//产生格子的动画效果
// function gridCartonn(gridNumNode) {

//     var value1 = cellSpace;
//     var value2 = 0;

//     if (timer) {
//         clearInterval(timer);
//     }

//     var timer = setInterval(() => {

//         if (value1 >= cellSideLength) {

//             clearInterval(timer);

//         }
//         else {
//             value1 += (cellSideLength-cellSpace)/8;

//             value2 += (cellSideLength-cellSpace)/16.0;


//             gridNumNode.style.width = value1 + 'px';

//             gridNumNode.style.height = value1 + 'px';

//             gridNumNode.style.lineHeight = value1 + 'px';

//             gridNumNode.style.fontSize = value2 + 'px';


//             gridNumNode.style.left = gridNumNode.offsetLeft - ((cellSideLength-cellSpace)/2.0)/8 + "px";
//             gridNumNode.style.top = gridNumNode.offsetTop - ((cellSideLength-cellSpace)/2.0)/8 + "px";
            
//         }
//     }, 30);

// }


//随机产生一个空位置



function existsnum() {
    var x = 0;
    var y = 0;
    var yesorno = false;

    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {

            if (board[i][j] == 0) {
                yesorno = true;

                while (true) {
                    x = Math.floor(Math.random() * 4);
                    y = Math.floor(Math.random() * 4);

                    if (board[x][y] == 0) {
                        break;
                    }
                }
            }

        }
    }


    return [x, y, yesorno];

}



